<template>
	<image class="load" src="/static/loading.gif" v-if="isload"></image>
	<view>

		<view>
			<text class="avatar-text">
				头像:
			</text>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="userInfo.avatarUrl"></image>
			</button>
		</view>

		<view class="weui-input">
			<text class="text">
				昵称:
			</text>
			<input type="nickname" class="nickname-input" v-model="userInfo.nickname" @blur="bindblur"
				@input="onBindinput" placeholder="请输入昵称" />
		</view>

		<view class="save">
			<button class="save-button" type="primary" size="mini" @click="onSave">保存</button>
		</view>

	</view>
</template>

<script>
	import {
		updateUserInfo,
		publicUpload
	} from '@/api/api.js'
	import store from '@/store/index.js'; //需要引入store
	export default {
		data() {
			return {
				defaultAvatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				userInfo: {
					avatarUrl: store.state.avatarUrl,
					nickname: store.state.nickName,
					genderCode: store.state.gender,
					userType: store.state.userType,
					patriarchCode: store.state.patriarchCode,
				},
				token: "",
				isload: false
			}
		},
		methods: {
			onChooseAvatar(e) {
				publicUpload(e.detail.avatarUrl).then(res => {
					let data = JSON.parse(res.data)
					console.log(data)
					this.userInfo.avatarUrl = data.data
				})

			},
			onBindinput(e) {
				console.log("onBindinput")
				console.log(e.detail)
				this.userInfo.nickname = e.detail.value
			},
			bindblur(e) {
				console.log("bindblur")
				console.log(e.detail)
				this.userInfo.nickname = e.detail.value; // 获取微信昵称
			},
			onSave() {
				var that = this;
				that.isload = true
				console.log(that.userInfo)
				updateUserInfo(that.userInfo).then(res => {
					console.log(res.data)
					if (res.data.code != 0) {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "修改成功"
						})
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
					that.isload = false
				})
			},
		},
	}
</script>

<style lang="scss">
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar-text {
		position: absolute;
		margin-top: 20px;
		margin-left: 120px;

	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}

	.container {
		display: flex;
	}

	.weui-input {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: 100rpx;
		display: flex;
		margin-bottom: 10rpx;

		.text {
			margin-top: 30rpx;
			margin-left: 50rpx;
		}

		.nickname-input {
			margin-top: 30rpx;
			margin-left: 10rpx;
		}

		.uni-radio {
			margin-top: 30rpx;
			margin-left: 50rpx;
			display: flex;

			.radio {
				margin-left: 20rpx;
			}
		}
	}



	.save {
		margin-top: 50rpx;
		text-align: center;
	}

	.load {
		display: flex;
		position: absolute;
		margin-top: 350rpx;
		z-index: 3;
		margin-left: 70rpx;
	}
</style>